<template>
  <div>
    <div>
      <ele-page
        v-loading="loading"
        :formConfig="searchDialog"
        ref="eleTable"
        :column="column"
        :getList="mesTmMaterialOrderOrderPage"
        uniqueId="quoteOrderTable"
      ></ele-page>
    </div>
    <ele-form-drawer
      class="dialog-pack"
      :isLoading="isLoading"
      :isShowBackBtn="false"
      :isShowSubmitBtn="false"
      :isShowCancelBtn="false"
      v-model="formDataDialog"
      v-bind="formDescDialog"
      :request-fn="handleSubmit"
      :visible.sync="visible"
      :title="title"
      size="95%"
    >
      <el-row type="flex" class="row-bg" justify="end">
        <el-button type="primary" @click="handleSubmit(false)">保存</el-button>
        <el-button type="primary" @click="handleSubmit(true)">提交</el-button>
      </el-row>
      <template v-slot:materialList>
        <el-table
          :data="formDataDialog.materialList"
          style="width: 100%">
          <el-table-column
            v-if="false"
            prop="orderStateOg"
            label="orderStateOg">
          </el-table-column>
          <el-table-column
            prop="orderCode"
            label="工单号">
          </el-table-column>
          <el-table-column
            prop="partsName"
            label="部件">
          </el-table-column>
          <el-table-column
            prop="materialName"
            label="物料名称">
          </el-table-column>
          <el-table-column
            prop="materialType"
            label="类型">
          </el-table-column>
          <el-table-column
            prop="materialNum"
            label="物料用量"
            min-width="200">
            <template slot-scope="scope">
              <el-input-number
                placeholder="请输入物料用量"
                :disabled = 'scope.row.orderStateOg !== "0"'
                v-model="scope.row.materialNum"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column
            prop="materialBrand"
            label="品牌">
            <template slot-scope="scope">
              <div v-bind:class="{ select_btn: (scope.row.materialType === '集采' || scope.row.materialType === '辅料') &&  !scope.row.materialBrand}">
                <el-select v-model="scope.row.materialBrand"
                           clearable
                           filterable
                           placeholder="请选择品牌"
                           :disabled='scope.row.orderStateOg !== "0"'
                           @change="getMaterialUnit(scope.row,scope.row.materialBrand)"
                >
                  <el-option
                    v-for="dict in scope.row.materialBrandList"
                    :key="dict"
                    :label="dict"
                    :value="dict">
                  </el-option>
                </el-select>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="materialUnit"
            label="物料规格">
            <template slot-scope="scope">
              <div v-bind:class="{ select_btn: (scope.row.materialType === '集采' || scope.row.materialType === '辅料') &&  !scope.row.materialUnit}">
                <el-select v-model="scope.row.materialUnit"
                           clearable
                           filterable
                           style="color: #0F9E5E"
                           placeholder="请选择规格"
                           :disabled='scope.row.orderStateOg !== "0"'
                           @change="materialUnitChange(scope.row)"
                >
                  <el-option
                    v-for="dict in scope.row.materialUnitList"
                    :key="dict.unit"
                    :label="dict.unit"
                    :value="dict.unit">
                  </el-option>
                </el-select>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="countUnitShow"
            label="领用单位">
          </el-table-column>
          <el-table-column
            prop="orderState"
            label="确认状态">
            <template slot-scope="scope">
              <el-select v-model="scope.row.orderState"
                         :disabled='scope.row.orderStateOg !== "0" '
              >
                <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            prop="orderStateInitial"
            label="初次确认状态"
            disabled="true"
          >
            <template slot-scope="scope">
              <el-select v-model="scope.row.orderStateInitial"
                         :disabled='true'
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="viewPic( scope.row.materialPhotoUrl)">查看图片</el-button>
              <!--<el-button-->
              <!--  size="mini"-->
              <!--  type="danger"-->
              <!--  @click="handleDelete(scope.$index, scope.row)">删除</el-button>-->
            </template>
          </el-table-column>

        </el-table>
      </template>
    </ele-form-drawer>
    <el-dialog title="图片"
               :visible.sync="dialogVisible"
               width="80%"
               :append-to-body="true"
               v-loading="isLoading"
               :close-on-click-modal="false">
      <div
        class="item"
        v-for="(item, key) in imgUrlList"
        :key="key"
      >
        <el-image
          style="width: 100px; height: 100px"
          :src="item"
          :preview-src-list="imgUrlList">
        </el-image>
<!--        <el-image-->
<!--          :src="item"-->
<!--        ></el-image>-->
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { searchConfig, rowConfig } from './config'

import { formDescDialogMixin } from '@/views/materials/tmMaterialOrderList/config'
import { uniqueKey } from '@/utils/judge'
import {
  mesTmMaterialOrderOrderPage,
  mesTmMaterialOrderList,
  mesTmMaterialOrderQuantityConfirmation,
  mesTmMaterialOrderQuantityConfirmationBatch,
  mesTmMaterialOrderQuantitySaveBatch
} from "@/api/materials/tmMaterialOrder";
import {getUnitsDetailByBrand, getUnitsDetailByBrandII, mesTmMaterialUnitsDetail} from "@/api/materials/unit";

export default {
  name: 'quoteOrder',
  mixins: [searchConfig, formDescDialogMixin],
  data() {
    const self = this
    return {
      options: [{
        value: '0',
        label: '待确认'
      }, {
        value: '3',
        label: '确认有货'
      }, {
        value: '4',
        label: '确认无货'
      }],
      imgUrlList:[],
      title: null,
      visible: false,
      dialogVisible: false,
      isLoading: false,
      loading: false,
      formDataDialog: {},
      // formDescDialog, //新增修改框
      mesTmMaterialOrderOrderPage,
      // 列表页字段的绑定配置
      column: [
        {
          type: 'selection',
          fixed: 'left'
        },
        {
          type: 'index',
          label: $i18n.t('common.order'),
          width: 60,
          fixed: 'left'
        },
        {
          prop: 'orderCode',
          label: '订单编号',
          showOverflowTooltip: true
        },
        {
          prop: 'modelName',
          label: '车型',
          showOverflowTooltip: true
        },
        {
          prop: 'vinCode',
          label: 'vin码',
          showOverflowTooltip: true
        },
        {
          prop: 'sumCount',
          label: '共计',
          showOverflowTooltip: true
        },
        {
          prop: 'sumConfim',
          label: '已确认',
          showOverflowTooltip: true
        },
        {
          prop: 'sumConfim1',
          label: '未确认',
          render: (h, scope) => {
            return <div>{scope.row.sumCount - scope.row.sumConfim}</div>
          }
        },
        {
          prop: 'operate',
          label: $i18n.t('common.operation'),
          width: 160,
          fixed: 'right',
          render: (h, scope) => {
            return (
              <ele-row-operation
                scope={scope}
                rowConfig={rowConfig}
                onRowOperate={this.rowOperate}
              />
            )
          }
        }
      ]
    }
  },
  computed: {},
  methods: {
    materialUnitChange(row)
    {
      let unitShow = '';
      let row1 = row.materialUnit
      let rowList = row.materialUnitList
      let countType = '1'
      rowList.forEach(val => {
        if(row1 === val.unit)
        {
          countType = val.countType
          if(val.countType === '2' && val.packUnit !== '无')
          {
            unitShow = val.packUnit
          }
          else
          {
            switch (val.mainUnit) {
              case 'EA':
                unitShow = '个'
                break
              case 'L':
                unitShow = '升'
                break
              case 'KG':
                unitShow = '千克'
                break
              default:
                unitShow = val.mainUnit
            }
          }

        }
      });
      this.$set(row,'countUnitShow',unitShow)
      this.$set(row,'countType',countType)
    },
    getMaterialUnit(row,row1){
      this.$set(row,'materialUnit',undefined)
      const params = {
        materialCode: row.materialCode,
        brand: row1
      };
      getUnitsDetailByBrandII(params)
        .then((res) => {
          // row.materialUnitList = res.data.result
          this.$set(row,'materialUnitList',res.data.result)
        })
    },
    test()
    {
      this.$message.warning('test' || '提示')
    },
    // 表格行操作事件
    rowOperate({ handleName, name, row }) {
      this.title = name
      const fnc = {
        edit: () => {
            mesTmMaterialOrderList(
              {
                orderStateList:"0,3,4,5,6,7,8",
                tmOrderCode:row.orderCode
              }
            ).then((res) => {
              this.formDataDialog =
                {
                  // customerPhone:'电话待定',
                  // customerContact:'联系人待定',
                  // customerName:'客户名待定',
                  // customerId:'客户号待定',
                  modelColor:row.modelColor,
                  vinCode:row.vinCode,
                  orderCode:row.orderCode,
                  modelName:row.modelName,
                  materialList:res.data.result
                }
            })
          this.visible = true
        },
      }
      fnc[handleName]()
    },
    doSubmit({ title, api, data }) {
      this.isLoading = true
      api(data)
        .then((res) => {
          const message = res.data.message
          this.$message.success(message || title)
          this.visible = false
          this.refresh()
        })
        .finally(() => {
          this.isLoading = false
        })
    },
    // 弹框提交事件
    handleSubmit(type) {
      if (this.isLoading) return // 判断状态 submitProdAreaList
      const data = this.formDataDialog.materialList
      const ics = data.map((val) => val.orderState).join(',')
      if(type)
      {
        let flag = true;
        data.some((item) => {
          //辅料、集采 必需填写规格和品牌
          if((item.materialType === '辅料' || item.materialType === '集采' ) && (item.orderStateOg === "0" && item.orderState !== "0"))
          {
            if((!item.materialBrand || !item.materialUnit))
            {
              this.$message.warning("集采/辅料物料必须提供品牌与规格")
              flag = false
              return true
            }
            if(item.orderState === "4" )
            {
              this.$message.warning("集采/辅料不可确认无货")
              flag = false
              return true
            }
          }
        });
        if(flag)
        {
          const params =
            {
              title: "确认完成",
              api: mesTmMaterialOrderQuantityConfirmationBatch,
              data
            }
          //console.warn(params)
          this.doSubmit(params)
        }
      }
      else
      {
        const params =
          {
            title: "保存完成",
            api: mesTmMaterialOrderQuantitySaveBatch,
            data
          }
        //console.warn(params)
        this.doSubmit(params)
      }
    },
    // 刷新表格数据
    refresh(isReset = true) {
      this.$refs.eleTable.refresh(isReset)
    },
    viewPic(url) {
      if(url)
      {
        this.imgUrlList = url.split(",");
        this.dialogVisible = true;
      }
      else
      {
        this.$message.warning("所选数据没有保存图片")
      }
    }
  }
}
</script>
<style>
.select_btn{
  .el-input__inner{
    border-color: #ff0000;
  }
}
</style>
